<script type="text/template-x" id="temp-conf-user-reg-gift">

</script>
<script>
    (function () {
        Vue.component('user-reg-gift', {
            template: "#temp-conf-user-reg-gift",
            props: ['name'],
            data: function () {
                return {
                    config: {type: 0, id: 0}
                }
            },
            methods: {
                getConfig: function () {
                    ajax({
                        uri: '/configure',
                        type: 'GET',
                        data: {name: this.name},
                        success: function (resp) {
                            this.config = resp.data.config;
                        }.bind(this)
                    })
                },
                saveConfig: function () {
                    ajax({
                        uri: '/configure',
                        type: 'POST',
                        data: {name: this.name, config: this.config},
                        success: function (resp) {
                            console.log(resp)
                        }.bind(this)
                    })
                }
            }
        })
    })()
</script>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="configure-app">
    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.name}}</td>
                    <td>{{item.title}}</td>
                    <td><a class="btn btn-primary btn-xs" @click="getConfig(item)">编辑</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="modal fade" id="modal-form">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title">{{temp.title}}</h3>
                    </div>
                    <div class="modal-body">
                        <div v-if=" 'USER_REGISTER_GIFT' == temp.name">
                            <div class="form">
                                <div class="form-group">
                                    <label>类型：</label>
                                    <select class="form-control" v-model="temp.config.type">
                                        <option v-for="(item, index) in Items" :value="index">{{item.name}}</option>
                                    </select>
                                </div>
                                <div v-if="temp.config.type !== undefined">
                                    <div class="form-group" v-if="1 == temp.config.type">
                                        <label>课程：<a class="btn btn-xs" @click="getCurriculum"><i class="fa fa-refresh"></i></a></label>
                                        <select class="form-control" v-model="temp.config.id">
                                            <option v-for="c in curriculumList" :value="c.id">[{{c.id}}]{{c.name}} / &yen; {{c.price}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group" v-if="3 == temp.config.type">
                                        <label>专栏：<a class="btn btn-xs" @click="getColumn"><i class="fa fa-refresh"></i></a></label>
                                        <select class="form-control" v-model="temp.config.id">
                                            <option v-for="c in columnList" :value="c.id">[{{c.id}}]{{c.title}} / &yen; {{c.price}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>有效</label>
                                    <input type="checkbox" class="checkbox" v-model="temp.config.enable">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary pull-left" data-dismiss="modal" @click="saveConfig()">提交</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</section>

<script>

    var Items = {
        1: {name: '课程', field: ''},
        3: {name: '专栏', field: ''},
    };

    var configureApp = new Vue({
        el: '#configure-app',
        data: {
            list: [],
            curriculumList: [],
            columnList: [],
            temp: {
                name: '',
                title: '',
                config: {},
            },
            Items: Items
        },
        mounted: function () {
            this.getList();
            this.getCurriculum();
            this.getColumn();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/configure',
                    type: 'GET',
                    success: function (resp) {
                        this.list = resp.data;
                    }.bind(this)
                })
            },
            modal: function (show = true) {
                $("#modal-form").modal(show)
            },
            getConfig: function (item) {
                this.temp.name = item.name;
                this.temp.title = item.title;
                ajax({
                    uri: '/configure',
                    type: 'GET',
                    data: {name: this.temp.name},
                    success: function (resp) {
                        this.temp.config = resp.data;
                        this.modal(true)
                    }.bind(this)
                })
            },
            saveConfig: function () {
                ajax({
                    uri: '/configure',
                    type: 'POST',
                    data: {name: this.temp.name, config: JSON.stringify(this.temp.config)},
                    success: function (resp) {
                        console.log(resp)
                    }.bind(this)
                })
            },
            getCurriculum(){
                ajax({
                    uri: '/bills/curriculum_names',
                    success: function (resp) {
                        this.curriculumList = resp.data;
                    }.bind(this)
                })
            },
            getColumn(){
                ajax({
                    uri: '/common/column_names',
                    success: function (resp) {
                        this.columnList = resp.data;
                    }.bind(this)
                })
            },
        }
    })
</script>